<template>
  <!-- 输入框 -->
  <van-field
    v-model="inputValue"
    label="金额"
    placeholder="点击输入"
    readonly
    @click="showKeyboard = true"
  />

  <!-- 数字键盘 -->
  <van-number-keyboard
    v-model="inputValue"
    :show="showKeyboard"
    extra-key="."
    close-button-text="完成"
    theme="custom"
    :safe-area-inset-bottom="true"
    @blur="showKeyboard = false"
    @input="onInput"
    @delete="onDelete"
    @close="onClose"
  />
</template>

<script setup>
import { ref } from 'vue';

const showKeyboard = ref(false);
const inputValue = ref('');

// 输入处理
const onInput = (value) => {
  console.log('输入值:', value);
};

// 删除处理
const onDelete = () => {
  inputValue.value = inputValue.value.slice(0, -1);
};

// 关闭键盘
const onClose = () => {
  showKeyboard.value = false;
};
</script>

<style>
/* 自定义键盘样式 */
.van-number-keyboard {
  --number-keyboard-background: #f7f8fa;
  --number-keyboard-key-height: 54px;
  --number-keyboard-key-font-size: 28px;
}

/* 适配安全区域 */
.van-number-keyboard--safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
</style>